<template>
  <div class="LiveAudit" v-loading="loading">
    <el-card class="card" style="overflow: auto">
      <h3><span class="tag"></span> 直播内容审核</h3>
      <el-input
        style="width: 300px"
        clearable
        placeholder="请输入内容"
        v-model="id"
        size="small"
      >
        <template slot="prepend">主播ID：</template>
      </el-input>
      <el-button class="btn" icon="el-icon-search" size="small"
        >查询搜索</el-button
      >
      <el-row :gutter="40">
        <el-col v-for="(i, index) in data" :key="index" :span="4"
          ><div class="test" @click="play(i)">
            <img :src="i.cover" alt="" />
            <div class="info">
              <el-row>
                <el-col :span="10">房间名：</el-col>
                <el-col :span="14">{{ i.theme }}</el-col>
                <el-col :span="10">主播昵称：</el-col>
                <el-col :span="14">{{ i.nickname }}</el-col>
                <el-col :span="10">主播ID：</el-col>
                <el-col :span="14">{{ i.userId }}</el-col>
                <el-col :span="10">观看人数 ：</el-col>
                <el-col :span="14">{{ i.lookNums }}</el-col>
                <el-col :span="10">当前权重 ：</el-col>
                <el-col :span="14">{{ i.weight }}</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="12"
        :total="total"
        @current-change="currentChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="直播详情"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <PlayLive studio=""></PlayLive>
    </el-dialog>
  </div>
</template>

<script>
import PlayLive from "./components/PalyLive";
import { anchorroomQueryList } from "@/api/AuditManagement";
export default {
  components: { PlayLive },
  data() {
    return {
      loading: false,
      id: "",
      data: [],
      total: 0,
      page: 1,
      pageSize: 12,
      centerDialogVisible: false,
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await anchorroomQueryList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.id,
      });
      this.loading = false;
      if (res.code == 0) {
        this.data = res.data.list;
        this.total = res.data.total;
      }
    },
    currentChange(i) {
      this.page = i;
      this.getList();
    },
    play(obj) {
      this.centerDialogVisible = true;
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.LiveAudit {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .card {
    height: calc(100vh - 90px);
  }
  .test {
    width: 100%;
    height: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #d3dce6;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .info {
      width: 100%;
      height: 120px;
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(67, 67, 67, 0.5);
      color: #ffffff;
      padding: 5px;
      line-height: 20px;
    }
  }
}
</style>